<template>
  <div class="doc-type2">
    <template v-if="isValueType">
      <slot></slot>
    </template>
    <template v-else >
      <h2 v-if="type.name">{{ type.name }} <small>({{ type.type }})</small></h2>
      <small v-else>({{ type.type }})</small>
    </template>

    <template v-if="type.type == 'string'">
      {{ type.name }}
    </template>
    <template v-else-if="type.type == 'generic'">
      <template v-if="type.name != 'Array'">
        {{ type.name }}&lt;
      </template><template v-else />
      <doc-type2 v-for="item, index in type.value" :key="index" :type="item" value-type>
      </doc-type2>
      <template v-if="type.name != 'Array'">
        >
      </template>
      <template v-else>
        []
      </template>
    </template>
    <template v-else-if="type.type == 'ref'">
      <a>
        {{ type.name.substring(type.name.lastIndexOf('.') + 1) }}
      </a>
    </template>
    <template v-else-if="type.type == 'enum'">
      <template v-if="isValueType">
        (
        <template v-for="item, index in type.value" :key="index">
          {{ index > 0 ? '|' : '' }} '{{ item.name }}'
        </template>
        )
      </template>
      <template v-else>
        <ee-space wrap>
          <ee-tag :border="false" v-for="item, index in type.value" :key="index">
            '{{ item.name }}'
            <template v-if="item.note">
              - {{ item.note }}
            </template><template v-else />
          </ee-tag>
        </ee-space>
      </template>
    </template>
    <template v-else-if="type.type == 'function'">
      <template v-if="isValueType">
        function(
        <doc-type2 v-for="item, index in type.value.filter(i => i.name != 'return')" :key="index" :type="item.type"
                   value-type>
          {{ index > 0 ? ', ' : '' }}
        </doc-type2>
        )
        <doc-type2 v-if="type.value.find(i => i.name == 'return')" :type="type.value.find(i => i.name == 'return').type"
                   value-type>
          &nbsp;:
        </doc-type2>
      </template>
      <template v-else>
        <p v-if="type.note">{{ type.note }}</p><template v-else />
        <ee-table :datas="type.value" :columns="doc.columns">
          <template #type="{ value }">
            <doc-type2 :type="value"></doc-type2>
          </template>
        </ee-table>
      </template>
    </template>
    <template v-else-if="type.type == 'class'">
      <template v-if="isValueType">
        {
        <doc-type2 v-for="item, index in type.value" :key="index" :type="item.type" value-type>
          {{ index > 0 ? ', ' : '' }} {{ item.name }}:
        </doc-type2>
        }
      </template>
      <template v-else>
        <p v-if="type.note">{{ type.note }}</p><template v-else />
        <ee-table :datas="type.value" :columns="doc.columns">
          <template #type="{ value }">
            <doc-type2 :type="value"></doc-type2>
          </template>
        </ee-table>
      </template>
    </template>
    <template v-else-if="type.type == 'multiple-type'">
      <template v-if="isValueType">
        <doc-type2 v-for="item, index in type.value" :key="index" :type="item" value-type>
          {{ index > 0 ? '&nbsp;|&nbsp;' : '' }}
        </doc-type2>
      </template>
      <template v-else>
        <ul class="types">
          <li v-for="item, index in type.value" :key="index">
            <doc-type2 :type="item"></doc-type2>
          </li>
        </ul>
      </template>
    </template>
    <template v-if="isValueType">

    </template>
    <template v-else>

    </template>
  </div>
</template>

<script type="text/javascript">

export default {
  name: "doc-type2",
  data() {
    return {
    }
  },
  props: {
    /** type 有值类型和引用类型，值类型直接字符串形式显示，引用类型弹窗显示
     * 
     */
    type: {},
    /** 强制值类型，例如泛型子类型，函数参数就会被强制成值类型显示 */
    valueType: Boolean,
  },
  computed: {
    /** 是否为值类型 */
    isValueType() {
      if (this.valueType)
        return true;
      const type = this.type;
      switch (type.type) {
        // 强制值类型显示
        case 'string':
        case 'ref':
        case 'generic':
          return true;

        default:
          return !type.name && !type.note;
      }
    },
  },
  methods: {
  },
  mounted() {
  },
}
</script>

<style lang="scss" scoped>
.doc-type2 {
  display: flex;
  flex-wrap: wrap;
  line-height: 1.75;

  > * {
    margin: 0;
  }

  > h2,
  > p,
  > small {
    width: 100%;
  }

  > p {
    margin-bottom: .5em;
  }

  a {
    cursor: pointer;
    color: var(--primary0);
  }

  .types {
    list-style-type: disc;

    li {
      margin-inline-start: 1.5em;
    }
  }
}
</style>